<!-- directive:title Sparkline 小型图标 图小信息不少 -->
<!-- directive:breadcrumb Sparkline -->
<div class="panel-body">
    <div class="row">
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">Pie</div>
                <div class="panel-body text-center">
                    <div sparkline class="sparkline inline" options="sparkline1option" dataset="sparkline1data">loading...</div>
                    <div class="line pull-in"></div>
                    <div class="text-xs">
                        <i class="fa fa-circle text-info"></i> 60%
                        <i class="fa fa-circle text-muted m-l"></i> 40%
                    </div>
                </div>
                <div class="panel-body">
                    <script type="text/xianjs" ui-bs>
                        <div sparkline
                            class="sparkline inline"
                            options="sparkline1option"
                            dataset="sparkline1data"
                        >loading...</div>
                    </script>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">Data graph</div>
                <div class="bg-light dker wrapper m-t-n-xxs">
                    <span class="pull-right">Friday</span>
                    <span class="h4">$540</span>
                    <div class="text-center m-b-n m-t-sm">
                        <div sparkline options="sparkline2option" dataset="sparkline2data"></div>
                        <div sparkline class="sparkline inline" options="sparkline3option" dataset="sparkline3data">loading...</div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-4"> <small class="text-muted block">Market</small> <span>$1500.00</span> </div>
                        <div class="col-xs-4"> <small class="text-muted block">Referal</small> <span>$600.00</span> </div>
                        <div class="col-xs-4"> <small class="text-muted block">Affiliate</small> <span>$400.00</span> </div>
                    </div>
                </div>
                <div class="panel-body">
                    <script type="text/xianjs" ui-bs>
                        <div sparkline
                            options="sparkline2option"
                            dataset="sparkline2data"
                        ></div>
                        <div sparkline
                            class="sparkline inline"
                            options="sparkline3option"
                            dataset="sparkline3data"
                        >loading...</div>
                    </script>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">Stacked</div>
                <div class="panel-body">
                    <div class="m-b-md">
                        <p class="h3 font-thin">Investings</p>
                        Avarage investing in last year.
                    </div>
                    <div class="row m-b">
                        <div class="col-xs-6 text-right">
                            <div sparkline class="sparkline inline" options="sparkline4option" dataset="sparkline4data">loading...</div>
                        </div>
                        <div class="col-xs-6 text-right">
                            <div class="h5 text-black m-b">Revenue</div>
                            <div class="h6 text-black m-b">4500,00</div>
                            <div class="h5 text-black m-b">Costs</div>
                            <div class="h6 text-success">3450,00</div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <script type="text/xianjs" ui-bs>
                        <div sparkline
                            class="sparkline inline"
                            options="sparkline4option"
                            dataset="sparkline4data"
                        >loading...</div>
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">Stats</div>
                <table class="table table-striped m-b-none">
                    <thead>
                        <tr>
                            <th style="width:60px;" class="text-center">Graph</th>
                            <th>Item</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center"> <div sparkline data-height="20" class="sparkline inline" options="sparkline1option" dataset="sparkline1data">loading...</div> </td>
                            <td>App downloads</td>
                            <td class="text-success"> <i class="fa fa-level-up"></i> 40% </td>
                        </tr> <tr>
                            <td class="text-center"> <div sparkline data-height="20" class="sparkline inline" options="sparkline2option" dataset="sparkline2data">loading...</div> </td>
                            <td>Social connection</td>
                            <td class="text-success"> <i class="fa fa-level-up"></i> 20% </td>
                        </tr> <tr>
                            <td class="text-center"> <div sparkline data-height="20" class="sparkline inline" options="sparkline3option" dataset="sparkline3data">loading...</div> </td>
                            <td>Revenue</td>
                            <td class="text-warning"> <i class="fa fa-level-down"></i> 5% </td>
                        </tr> <tr>
                            <td class="text-center"> <div sparkline data-height="20" class="sparkline inline" options="sparkline4option" dataset="sparkline4data">loading...</div> </td>
                            <td>Customer increase</td>
                            <td class="text-danger"> <i class="fa fa-level-down"></i> 20% </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-6">
            <ul class="list-group clear-list">
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-sm-4 text-center" style="border-right: 1px solid #f4f4f4">
                            <div options="{ type: 'line', lineColor: '#92c1dc', fillColor: '#ebf4f9', height: '50', width: '80' }"
                            sparkline dataset="s01"></div><div class="knob-label">来访</div>
                        </div>
                        <div class="col-sm-4 text-center" style="border-right: 1px solid #f4f4f4">
                            <div options="{ type: 'line', lineColor: '#92c1dc', fillColor: '#ebf4f9', height: '50', width: '80' }"
                            sparkline dataset="s02"></div><div class="knob-label">在线</div>
                        </div>
                        <div class="col-sm-4 text-center">
                            <div options="{ type: 'line', lineColor: '#92c1dc', fillColor: '#ebf4f9', height: '50', width: '80' }"
                            sparkline dataset="s03"></div><div class="knob-label">总数</div>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    内联线性图: <span sparkline>1,4,4,7,5,9,10</span>.
                    内联线性图: <span sparkline dataset="[10,8,5,7,4,4,1]">Loading..</span>
                    柱状图: <span sparkline dataset="[10,8,5,7,4,4,1]" options="{type: 'bar', barColor: 'green'}">Loading..</span>
                </li>
                <li class="list-group-item">
                    柱状图: <span sparkline options="{type: 'bar', barColor: 'red'}">1,3,4,5,3,5</span>
                    内联线性图: <span sparkline dataset="[34, 43, 43, 35, 44, 32, 44, 52, 25]" options="{ type: 'line', lineColor: '#17997f', fillColor: '#1ab394' }"></span>
                    柱状图: <span sparkline options="{ type: 'bar', barColor: '#1ab394', negBarColor: '#c6c6c6'}">5, 6, 7, 2, 0, -4, -2, 4</span>
                </li>
                <li class="list-group-item">
                    饼状图: <span sparkline options="{ type: 'pie', sliceColors: ['#1ab394', '#b3b3b3', '#e4f0fb']}">1, 1, 2</span>
                    长线性图: <span sparkline options="{ type: 'line', lineColor: '#17997f', fillColor: '#ffffff'}">34, 43, 43, 35, 44, 32, 15, 22, 46, 33, 86, 54, 73, 53, 12, 53, 23, 65, 23, 63, 53, 42, 34, 56, 76, 15, 54, 23, 44</span>
                    三态图: <span sparkline options="{ type: 'tristate', posBarColor: '#1ab394', negBarColor: '#bfbfbf'}">1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1</span>
                </li>
                <li class="list-group-item">
                    散点图: <span sparkline options="{ type: 'discrete', lineColor: '#1ab394'}">4, 6, 7, 7, 4, 3, 2, 1, 4, 4, 5, 6, 3, 4, 5, 8, 7, 6, 9, 3, 2, 4, 1, 5, 6, 4, 3, 7</span>
                    行内 <span sparkline>10,8,9,3,5,8,5</span>
                    行内 <span sparkline>8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
                </li>
                <li class="list-group-item">
                    柱状 <span sparkline options="{type: 'bar'}">10,8,9,3,5,8,5</span>
                    负值 <span sparkline options="{type: 'bar'}">-3,1,2,0,3,-1</span>
                    对比 <span sparkline options="{type: 'bar'}">0:2,2:4,4:2,4:1</span>
                    范围 <span sparkline options="{ fillColor: false, changeRangeMin: 0, chartRangeMax: 10 }">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
                </li>
                <li class="list-group-item">
                    正负范围 <span sparkline options="{ fillColor: false, normalRangeMin: -1, normalRangeMax: 8 }">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
                    颜色 <span sparkline options="{ type: 'bar', barColor: '#aaf' }">4,6,7,7,4,3,2,1,4</span>
                </li>
                <li class="list-group-item">
                    离散 <span sparkline options="{ type: 'discrete', lineColor: 'blue', xwidth: 18 }">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span>
                    阙值 <span sparkline options="{ type: 'discrete', lineColor: 'blue', thresholdColor: 'red', thresholdValue: 4 }">4,6,7,7,4,3,2,1,4</span>
                    自定义颜色 <span sparkline options="{height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa', minSpotColor: false, maxSpotColor: false, spotColor: '#77f', spotRadius: 3}">10,8,9,3,5,8,5,7</span>
                </li>
                <li class="list-group-item">
                    股票 <span sparkline options="{type: 'tristate'}">1,1,0,1,-1,-1,1,-1,0,0,1,1</span>
                    颜色 <span sparkline options="{type: 'tristate', colorMap: {'-2': '#fa7', '2': '#44f'} }">1,2,0,2,-1,-2,1,-2,0,0,1,1</span>
                    饼状 <span sparkline options="{ type: 'pie', height: '1.0em' }">1,1,2</span>
                    <span sparkline options="{ type: 'pie', height: '1.0em' }">1,5</span>
                    <span sparkline options="{ type: 'pie', height: '1.0em' }">20,50,80</span>
                </li>
            </ul>
        </div>
    </div>
</div>

